<template>
  <div v-loading="loading">
    <div style="height: 90%!important;overflow: auto">
      <el-tree
        ref="tree"
        :data="wfConfigNodeList"
        :props="props"
        node-key="id"
        show-checkbox
        check-strictly
        @check="onSelect"
      />
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveSelect">选择</el-button>
    </div>
  </div>
</template>

<script>
import { listWfConfigNode, saveCopyNode } from '@/api/act/busFlow/wfConfigNode'

export default {
  name: 'WfConfigNodeSelect',
  data() {
    return {
      props: {
        children: 'children',
        label: 'nodeName'
      },
      wfConfigNodeList: [],
      queryParams: {
        flowId: undefined,
        nodeType: undefined
      },
      loading: true,
      selectNodeIds: [],
      flowId: undefined,
      nodeType: undefined
    }
  },
  methods: {
    init(flowId, nodeType) {
      this.loading = true
      this.queryParams.flowId = flowId
      this.queryParams.nodeType = 'first'
      this.nodeType = nodeType
      this.flowId = flowId
      listWfConfigNode(this.queryParams).then(response => {
        this.$set(this, 'wfConfigNodeList', response.rows)
        this.loading = false
      })
    },
    onSelect(data) {
      // 获取当前节点
      var currentNode = this.$refs.tree.getNode(data.id)
      var selectedKeys = this.$refs.tree.getCheckedKeys()
      if (currentNode.checked) {
        for (let i = currentNode.level; i > 1; i--) {
          // 判断父节点是否被选中,如果没被选中则选中父节点
          if (!currentNode.parent.checked) {
            currentNode = currentNode.parent
            selectedKeys.push(currentNode.data.id)
          }
        }
        var checkedChildIds = this.checkedChild(data, [])
        console.log(checkedChildIds)
        selectedKeys = selectedKeys.concat(checkedChildIds)
      } else {
        // 判断当前节点的子节点是否有选中，有的话则不允许取消选中
        if (this.isCheckedChildNode(currentNode)) {
          selectedKeys.push(currentNode.data.id)
        }
      }
      // 将所选节点进行选中
      this.$refs.tree.setCheckedKeys(selectedKeys)
    },
    // 获取当前节点下所有子节点
    checkedChild(data, childNodeIds = []) {
      var currentNode = this.$refs.tree.getNode(data.id)
      var childrNodes = currentNode.childNodes
      for (let i = 0; i < childrNodes.length; i++) {
        if (childrNodes[i].childNodes.length === 0) {
          childNodeIds.push(childrNodes[i].data.id)
        } else {
          childNodeIds.push(childrNodes[i].data.id)
          this.checkedChild(childrNodes[i].data, childNodeIds)
        }
      }
      return childNodeIds
    },
    // 判断是否有子节点
    isCheckedChildNode(node) {
      var childNodes = node.childNodes
      for (let i = 0; i < childNodes.length; i++) {
        if (childNodes[i].checked) {
          return true
        } else {
          if (childNodes[i].isLeaf) {
            return false
          } else {
            this.isCheckedChildNode(childNodes[i])
          }
        }
      }
    },
    saveSelect() {
      // 保存所选节点
      var nodeIds = this.$refs.tree.getCheckedKeys()
      var params = {}
      params.nodeIds = nodeIds || []
      params.nodeType = this.nodeType
      params.flowId = this.flowId
      this.loading = true
      saveCopyNode(params).then(res => {
        if (res.code === 200) {
          this.msgSuccess(this.$t('复制成功'))
          this.$parent.$parent.getList(this.flowId)
        }
        this.loading = false
        this.cancel()
      })
    },
    cancel() {
      this.selectNodeIds = []
      this.wfConfigNodeList = []
      this.$refs.tree.setCheckedKeys([])
      this.$parent.$parent.copyOpen = false
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog {
  width: 20% !important;
::-webkit-scrollbar {
  width: 3px;
  height: 1px;
}
::-webkit-scrollbar-thumb {

border-radius: 5px;
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {

box-shadow: #ffffff;
  background: #ffffff;
  border-radius: 5px;
}
}
/deep/ .el-dialog__body {
  overflow: auto;
}
</style>
